import { Card, Row, Col, Icon, Button } from "annar";
import React from "react";
import { View } from "remax/wechat";
// import Icon from '@vant/weapp/lib/icon';
import Image from "@vant/weapp/lib/image";
import { navigateTo } from "@remax/wechat";
import { access, origin } from "@/config/config";
import { Video } from "@/type/video";
import styles from "./index.css";
import { request } from "remax/ali";
import { usePageEvent } from "@remax/framework-shared";

export interface Props {
  data: Video;
}

export const ImageCard = (props: Props) => {
  const [videoPath, setVideopath] = React.useState(props.data.videoPath);
  const [coverPath, setCoverPath] = React.useState(props.data.coverPath);
  const [likeColor, setLikeColor] = React.useState("#333333");
  const [likeCount, setLikeCount] = React.useState(props.data.likeCounts);

  usePageEvent("onLoad", () => {
    if (props.data.isLike) {
      setLikeColor("#FF6666");
    } else {
      setLikeColor("#333333");
    }
  });

  const handlerTap = (e: any) => {
    console.log("fdaf");
    console.log(props.data);
    navigateTo({
      url: `/pages/watch/index?videoPath=${videoPath}&coverPath=${coverPath}&videoId=${props.data.id}&videoTitle=${props.data.videoDesc}`,
    });
  };

  const handlerTapLike = () => {
    likeColor == "#333333" ? setLikeColor("#FF6666") : setLikeColor("#333333");
    likeColor == "#333333"
      ? setLikeCount(likeCount + 1)
      : setLikeCount(likeCount - 1);
    let loginInfo = wx.getStorageSync("loginInfo");
    // TODO: 同步更新远程服务器
    if (likeColor == "#333333") {
      wx.request({
        url: `${origin}/video/like/${props.data.id}`,
        header: {
          token: loginInfo.token,
        },
      });
    } else {
      wx.request({
        url: `${origin}/video/unlike/${props.data.id}`,
        header: {
          token: loginInfo.token,
        },
      });
    }
  };

  // const navigateToProfile = () => {
  //     console.log(props.data)
  //     wx.navigateTo({
  //         url: `/pages/profile/index?userId=${props.data.id}`
  //     })
  // }

  return (
    <View
      style={{
        height: "540px",
        width: "50%",
        padding: "10px",
        flexShrink: 0,
        boxSizing: "border-box",
      }}
    >
      <Card
        title=""
        // description={props.data.videoDesc}
        // extra={<View>🏖</View>}
        style={{ padding: "5px" }}
        cover={
          <img
            style={{ width: "inherit", height: "340px", objectFit: "cover" }}
            alt="Anna"
            src={`${access}${props.data.coverPath}`}
            onClick={handlerTap}
          />
        }
        foot={
          <View>
            <View className={styles.footBar}>
              <View className={styles.footBarItem}>
                {/* 头像 */}
                <img
                  className={styles.avatar}
                  alt=""
                  width="30px"
                  src={`${access}${props.data.userAvatar}`}
                />
                {/* 发布人名字 */}
                <View>{props.data.nickName}</View>
              </View>
              <View className={styles.footBarRight}>
                <Button
                  type="primary"
                  shape="circle"
                  icon={<Icon type="like" size="40px" color={likeColor} />}
                  //   onTap={handlerTapLike}
                  ghost
                />
                {likeCount}
              </View>
            </View>
          </View>
        }
      >
        {props.data.videoDesc}
      </Card>
    </View>
  );
};
